<template>
  <div class="console_base">
    <div class="console_header">
      <!-- 标题 -->
      <div class="title">
        <img src="../../images/控制台-3.png" />
        <p>控制台</p>
      </div>

      <!-- 导航栏 -->
      <div class="console_navigate">
        <RouterLink to="/start" active-class="active"
          ><div>
            <p style="font-size: 28px; transform: translateY(-1.5px); margin: 0 6px 0 0">✪</p>
            返回
          </div></RouterLink
        >
        <RouterLink to="/console/console_group" active-class="active"
          ><div>
            <p style="font-size: 28px; transform: translateY(-1.5px); margin: 0 6px 0 0">☸</p>
            控制
          </div></RouterLink
        >
        <RouterLink to="/sortMain" active-class="active"
          ><div>
            <p style="font-size: 25px; transform: translateY(-1.5px); margin: 0 7px 0 0">✪</p>
            评绩
          </div></RouterLink
        >
      </div>

      <!-- 窗口操作区 -->
      <div class="operate">
        <div class="minWindow" @click="minWindow">—</div>
        <div class="bigOrSmall" @click="toBiggerOrSmaller">{{ bigOrSmall }}</div>
        <div class="quit" @click="quit">✖</div>
      </div>
    </div>
    <!-- 展示区 -->
    <div class="console_main">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>
import { RouterView, RouterLink, useRoute } from 'vue-router'
import { onMounted, ref, watch } from 'vue'
import './console.css'
import router from '../../router'

let bigOrSmall = ref('↗')
let window_is_bigger = ref(false)

// 监听窗口是否最大化，更改显示的符号
watch(window_is_bigger, (newValue) => {
  if (newValue === true) {
    bigOrSmall.value = '↙'
  } else {
    bigOrSmall.value = '↗'
  }
})

//读取房间数据测试
onMounted(() => {
  const route = useRoute()
  const roomId = ref(route.query.roomId)
  router.push({ path: '/console/console_group', query: { roomId: roomId.value } })
})

// 窗口放大和窗口恢复默认大小
function toBiggerOrSmaller() {
  // 获取当前窗口
  const currentWindow = window
  // 尝试最大化窗口
  if (
    (currentWindow.outerWidth < screen.width || currentWindow.outerHeight < screen.height) &&
    window_is_bigger.value === false
  ) {
    currentWindow.moveTo(0, 0)
    currentWindow.resizeTo(screen.width, screen.height)
    window_is_bigger.value = true
  } else {
    // 尝试还原窗口
    currentWindow.resizeTo(800, 550)
    currentWindow.moveTo(500, 235)
    window_is_bigger.value = false
  }
}

// 退出程序
function quit() {
  window.electron.closeWindow()
}
// 最小化窗口
function minWindow() {
  window.electron.minWindow()
}
</script>
